<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- BOOTSTRAP STYLES-->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!--CUSTOM BASIC STYLES-->
<link href="css/basic.css" rel="stylesheet" />
<!--CUSTOM MAIN STYLES-->
<link href="css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.useso.com/css?family=Open+Sans'
	rel='stylesheet' type='text/css' />
<title></title>
<script type="text/javascript">
			function dianji() {

				var flag = document.getElementById("all").checked;
	     		var cks = document.getElementsByName("ck");

				if(flag) {

					for(var i = 0; i < cks.length; i++) {

						cks[i].checked = true;

					}

				} else {

					for(var i = 0; i < cks.length; i++) {

						cks[i].checked = false;

					}

				}

			}
		</script>
<script src="http://code.jquery.com/jquery-1.11.0-beta1.js"></script>
<script type="text/javascript">
        $(function () {
            $("input[type=checkbox][name=ck]").click(function () {
                var objs = $("input[type=checkbox][name=ck]:checked").map(function () {
                    var tr = $(this).closest("tr");
                    return { "dj": $(tr).find("td:eq(1)").text(), "zhj": $(tr).find("td:eq(2)").text(), "zp": $(tr).find("td:eq(3)").text() };
                }).get(); 
               
            })
        })
         function back(){
        	var cf=confirm("确认返回？");
        	if(cf)
        		{
        		window.location.href="showstaff.do";
        		}
        	
        }
    </script>
<style>
			.black_overlay {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
			
				z-index: 1;
				
		
				filter: alpha(opacity=8);
			}
			
			.white_content {
				display: none;
				position: absolute;
				top: 25%;
				left: 25%;
				width: 45%;
				height: 300px;
				padding: 20px;
				border: 10px solid orange;
				background-color: white;
				z-index: 2;
				overflow: auto;
			}
		</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<h1 align="center" class="page-header">
					客多多员工管理列表 <small> (管理表)</small>
				</h1>
			</div>
		</div>
		<div class="row">
			<div class=" col-md-12 ">
				<!-- 商品列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">员工管理列表</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
					
						<br />

				<p>
			<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">添加员工</a>
		</p>
		<form action="insertstaff.do">
		<div id="light" class="white_content" >
			
	
			职位名称：<select  id="role_id" name="role_id" type="text" >
			<option value=1>采购员</option><option value=2>厨师</option><option value=3>会计</option><br><br>
			</select><br>
			员工姓名：<input id="staff_name" name="staff_name" type="text" /><br><br>
			员工薪水：<input id="staff_salary" name="staff_salary" type="text" /><br><br>
 			
			
			<input id="add" name="add" type="submit" value="添加"  class="btn btn-info" "/>
			<input id="return" name="return" type="button" value="返回" onclick="back()" class="btn btn-info"/>

		</div>
		</form>
		<div id="fade" class="black_overlay"></div>
						<br />

						<div class="table-responsive">
							<table class="table table-striped table-bordered table-hover"
								id="review_manage">
								<thead>
									<tr>
							
										<th>员工编号</th>	
										<th>员工姓名</th>
										<th>员工职位</th>
										<th>员工薪水</th>
										<th>操作</th>
										
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${staffList}" var="al">
										<tr>										
											<td>${al.staff_id}</td>
											<td>${al.staff_name}</td>
											<td>${al.role_name}</td>
											<td>${al.staff_salary}</td>
											
											<td><a title="修改"
												class="t-edit glyphicon glyphicon-pencil"
												href="updates.do?staff_id=${al.staff_id }"></a> 
												&nbsp<a title="删除" href="deletestaff.do?staff_id=${al.staff_id}"
												class="t-del glyphicon glyphicon-trash"></a></td>
										</tr>
									</c:forEach>
							</table>
						</div>

						<!--	<div class="container">-->
						<!--分页显示-->
						
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>